<template>
	<div>
		<h2>
			{{ datas.text }}
		</h2>
		<el-tabs type="border-card" :stretch="true">
			<el-tab-pane label="内容">
				<div class="decorate-card">
					<div class="title">内容设置</div>

					<el-form label-width="80px">
						<!-- 空白高度 -->
						<el-form-item label="空白高度">
							<!--              <el-input v-model="datas.lineColor">-->
							<!--                -->
							<!--              </el-input>-->
							<el-slider v-model="datas.blankHeight" :max="100" show-input> </el-slider>
						</el-form-item>
						<!-- 选择样式 -->
						<el-form-item label="选择样式">
							<el-radio-group v-model="datas.mode">
								<el-radio label="solid">实线</el-radio>
								<el-radio label="dashed">虚线</el-radio>
								<el-radio label="dotted">点线</el-radio>
							</el-radio-group>
						</el-form-item>
						<el-form-item label="辅助线颜色">
							<el-input v-model="datas.lineColor">
								<template #append>
									<el-color-picker v-model="datas.lineColor" :predefine="predefineColors"> </el-color-picker>
								</template>
							</el-input>
						</el-form-item>
					</el-form>
				</div>
			</el-tab-pane>
			<el-tab-pane label="样式">
				<DataStyle :datas="datas.dataStyle"></DataStyle>
			</el-tab-pane>
			<el-tab-pane label="数据">
				<StyleComponentData :datas="datas"></StyleComponentData>
			</el-tab-pane>
		</el-tabs>
	</div>
</template>

<script setup lang="ts" name="assistlinestyle">
import { ref } from 'vue';

const props = defineProps({
	datas: {},
});
const name = ref();

const predefineColors = ref([
	'#ff4500',
	'#ff8c00',
	'#ffd700',
	'#90ee90',
	'#00ced1',
	'#1e90ff',
	'#c71585',
	'#409EFF',
	'#909399',
	'#C0C4CC',
	'rgba(255, 69, 0, 0.68)',
	'rgb(255, 120, 0)',
	'hsv(51, 100, 98)',
	'hsva(120, 40, 94, 0.5)',
	'hsl(181, 100%, 37%)',
	'hsla(209, 100%, 56%, 0.73)',
	'#c7158577',
]);

const borderType = ref([
	{
		icon: 'icon-icon_fengexian_shixian',
		text: '实线',
		type: 'solid',
	},
	{
		icon: 'icon-xuxian',
		text: '虚线',
		type: 'dashed',
	},
	{
		icon: 'icon-dianxian--',
		text: '点线',
		type: 'dotted',
	},
]);
</script>

<style scoped lang="scss">
.el-tabs--border-card {
	:deep(.el-tabs__content) {
		padding: 0px !important;
	}
	border: 0px;

	:deep(.el-tabs__header) {
		background-color: #d9d9d9 !important;
	}
}

:deep(.el-input-group__prepend) {
	padding: 0px !important;
}

:deep(.el-input-group__append) {
	padding: 0px !important;
}

:deep(.el-color-picker__trigger) {
	padding: 0px;
}

:deep(.el-color-picker__color) {
	border: 0px;
}
</style>
